import { command, service } from "@/config/api";
import { MoreVert, PlayArrow, Stop } from "@mui/icons-material";
import {
  Box,
  Chip,
  IconButton,
  Menu,
  MenuItem,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow
} from "@mui/material";
import { invoke } from "@tauri-apps/api/core";

export default function Dashboard() {
  const [services, setServices] = useState([
    { id: service.web, name: "Web Service", status: 0 },
    { id: service.cron, name: "Cron Service", status: 0 },
    { id: service.lab, name: "Lab Gateway", status: 0 },
    { id: service.vista, name: "Vista Gateway", status: 0 }
  ]);

  useEffect(() => {
    update();
  });

  const update = async () => {
    const cmds = await invoke<string[]>(command.info_service);

    setServices(
      services.map((v) => {
        return { ...v, status: cmds.includes(v.id) ? 1 : 0 };
      })
    );
  };

  const startAll = async () => {
    await invoke(command.start_all_service);
    update();
  };
  const stopAll = async () => {
    await invoke(command.stop_all_service);
    update();
  };
  const start = async (v: service) => {
    await invoke(command.start_service, { cmd: v });
    update();
  };
  const stop = async (v: service) => {
    await invoke(command.stop_service, { cmd: v });
    update();
  };

  const stoped = (
    <Chip variant="outlined" label="Stoped" color="error" size="small" icon={<Stop />} />
  );
  const running = (
    <Chip variant="outlined" label="Running" color="success" size="small" icon={<PlayArrow />} />
  );

  const content = services.map((v) => {
    return (
      <TableRow key={v.id}>
        <TableCell component="th" scope="row">
          {v.name}
        </TableCell>
        <TableCell align="center">{v.status == 0 ? stoped : running}</TableCell>
        <TableCell align="right">
          {v.status == 0 ? (
            <IconButton aria-label="Start" size="small" onClick={() => start(v.id)}>
              <PlayArrow fontSize="inherit" />
            </IconButton>
          ) : (
            <IconButton aria-label="Stop" size="small" onClick={() => stop(v.id)}>
              <Stop fontSize="inherit" />
            </IconButton>
          )}
        </TableCell>
      </TableRow>
    );
  });
  const [anchorEl, setAnchorEl] = useState<HTMLElement>();
  const open = anchorEl !== undefined;
  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(undefined);
  };
  const toolBar = (
    <Box sx={{ display: "flex", gap: "10px", justifyContent: "end" }}>
      <IconButton aria-label="Start" onClick={startAll} color="success">
        <PlayArrow fontSize="inherit" />
      </IconButton>
      <IconButton aria-label="Start" onClick={stopAll} color="error">
        <Stop fontSize="inherit" />
      </IconButton>
      <IconButton aria-label="more" onClick={handleClick}>
        <MoreVert />
      </IconButton>

      <Menu id="basic-menu" anchorEl={anchorEl} open={open} onClose={handleClose}>
        <MenuItem onClick={handleClose}>查看日志</MenuItem>
      </Menu>
    </Box>
  );

  return (
    <Box
      sx={{
        mx: "auto",
        width: "80%"
      }}
    >
      <h1 style={{ fontSize: "2rem", textAlign: "center" }}>Dashboard</h1>
      {toolBar}
      <TableContainer component={Paper}>
        <Table sx={{ userSelect: "none" }}>
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell align="center" sx={{ width: 160 }}>
                Status
              </TableCell>
              <TableCell align="right">Action</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>{content}</TableBody>
        </Table>
      </TableContainer>
    </Box>
  );
}
